<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <button id="btn" class="btnClass">获取event对象</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function(e) {
    var obj = event.target || window.event.srcElement; 
    console.log(obj.nodeName);     
    console.log(obj.id);            
    console.log(obj.className);    
    console.log(obj.innerText);    
  };
</script>

<style>
  #red{background:yellow;width:300px;height:300px;}
  #green{background:red;width:150px;height:150px;}
  #yellow{background:black;width:100px;height:100px;}
</style>
<div id="red">
  <div id="green">
    <div id="yellow"></div>
  </div>
</div>
<script>
  var red = document.getElementById('red');
  var green = document.getElementById('green');
  var yellow = document.getElementById('yellow');
  red.onclick = function() {
    console.log('red');
  };
  green.onclick = function() {
    console.log('green');
  };
  yellow.onclick = function() {
    console.log('yellow');
  };
</script>

<script>
  red.onclick = function(e) {
    // func(e);
    console.log('red');
  };
  green.onclick = function(e) {
    // func(e);
    console.log('green');
  };
  yellow.onclick = function(e) {
    // func(e);
    console.log('yellow');
  };
  function func(e) {
    if (window.event) {    
      window.event.cancelBubble = true;
    } else {               
      e.stopPropagation();
    }
  }
</script>

<a id="test" href="http://www.example.com">默认链接</a>
<script>
  document.getElementById('test').onclick = function(e) {
    if (window.event) {    
      window.event.returnValue = false;
    } else {             
      e.preventDefault();
    }
  };
</script>
</head>
<body>
    
</body>
</html>